<template>
  <div class="message">
    <div class="titlego">
      <van-nav-bar
        fixed
        title="我的信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-empty v-show="datatext.length == 0" description="暂时没有信息" />
    <div class="mess" v-show="datatext.length > 0">
      <ul>
        <li v-for="(item, index) in datatext" :key="index">
          <div class="left_text">
            <p>{{ item.messagetext }}</p>
          </div>
          <div class="right_text">
            <p>{{ item.times }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "message",
  data() {
    return {
      datatext: [
        {
          messagetext:
            "@静看梁山落雪梅，你分享的红烧肉我有尝试耶，真的嘎嘎好吃，爆赞！",
          times: "2022/04/01",
        },
        {
          messagetext: "@静看梁山落雪梅，你有官方活动受邀点赞了你的菜谱。",
          times: "2022/04/01",
        },
        {
          messagetext: "@静看梁山落雪梅，我也好想尝试一下你们家乡的没事耶",
          times: "2022/04/01",
        },
        {
          messagetext: "@静看梁山落雪梅，你的这个炸鸡真的绝绝子啊！！",
          times: "2022/04/01",
        },
        
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.message {
  width: 100%;
  height: 100%;
  background-color: rgb(246, 245, 245);
  .titlego {
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #ccc;
  }
  .mess {
    width: 100%;
    height: 100%;
    ul {
      width: 100%;
      height: 622px;
      li {
        width: 95%;
        height: 55px;
        padding-left:5% ;
        background-color: rgb(251, 251, 251);
        border-bottom: 1px solid #feca2d;
        .left_text {
          float: left;
          width: 80%;
          height: 100%;
        }
        .right_text {
          position: relative;
          float: left;
          width: 20%;
          height: 100%;
          text-align: center;
          p {
            position: absolute;
            bottom: 0px;
            padding: 0px;
            margin: 0px;
          }
        }
      }
    }
  }
}
</style>